<template>
	<view class="Case">
		<navBar title="设计推荐" isBack></navBar>
		<view class="wrap">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="navTo('/pages_design/pages/design/personal/personal?designerId=' + item.id)">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="8" :image="item.back_thumb_url.path"
							:index="index">
						</u-lazy-load>
						<view class="userData" style="">
							<view class="userItem" style="">
								<view class="usertImg" style="">
									<image :src="item.avatar.path"></image>
								</view>
								<view class="userMes" style="">
									<view class="userMes_left" style="">
										<view class="userName" style="">
											{{item.title}}
										</view>
										<view class="userPirce" style="">{{item.end_offer}} <text style="">元/m²</text>
										</view>
									</view>
									<view class="userYear" style="">从业 {{item.employ_year}}年 | 方案 {{item.case_num}}
									</view>
								</view>
							</view>
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner" v-for="(items,indexs) in item.design_style" :key="indexs">
								{{items.name}}
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="navTo('/pages_design/pages/design/personal/personal?designerId=' + item.id)">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="8" :image="item.back_thumb_url.path"
							:index="index">
						</u-lazy-load>
						<view class="userData" style="">
							<view class="userItem" style="">
								<view class="usertImg" style="">
									<image :src="item.avatar.path"></image>
								</view>
								<view class="userMes" style="">
									<view class="userMes_left" style="">
										<view class="userName" style="">
											{{item.name}}
										</view>
										<view class="userPirce" style="">{{item.end_offer}} <text style="">元/m²</text>
										</view>
									</view>
									<view class="userYear" style="">从业 {{item.employ_year}}年 | 方案 {{item.case_num}}
									</view>
								</view>
							</view>
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner" v-for="(items,indexs) in item.design_style" :key="indexs">
								{{items.name}}
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" ></u-loadmore>
			<!-- @loadmore="addRandomData" -->
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js';
	import navBar from '@/components/navBar/navBar.vue';
	import service_design from '@/service/design'
	import service_mall from '@/service/mall.js'
	export default {
		data() {
			return {
				token: '',
				userMobile: '',
				loadStatus: 'loadmore',
				flowList: [],
			};
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {},
		onLoad() {
			this.$utils.getUrl()
			var that = this
			this.addRandomData();
		},
		onShow() {

			this.userMobile = this.$store.state.index.userMobile
			this.token = uni.getStorageSync('token')
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载 
			setTimeout(() => {
				// this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			addRandomData() {
				service_design.support({}).then(res => {
					if (res.code == 1) {
						var resList = res.data
						// let index = this.$u.random(0, resList.length - 1);
						console.log(resList);
						// resList.forEach((item, indexs) => {
						// 	this.flowList.push(item);
						// })
						this.flowList = resList
						// for (let i = 0; i < 10; i++) {

						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						// let item = JSON.parse(JSON.stringify(this.resList[index]))
						// item.id = this.$u.guid();
						// this.flowList.push(item);

						// }
					}

				});

			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.ellipsisText {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
		box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);

	}



	.userData {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		flex: 1;

		.userItem {
			display: flex;
			align-items: center;
			flex: 1;

			.usertImg {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.userMes {
				flex: 1;
				margin-left: 10rpx;

				.userMes_left {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex: 1;
					margin-bottom: 4rpx;

					.userName {
						font-size: 28rpx;
						font-weight: 600;
					}

					.userPirce {
						font-size: 30rpx;
						font-weight: 500;

						text {
							font-size: 20rpx;
							font-weight: 400;
							margin-left: 2rpx;
						}
					}
				}

				.userYear {
					font-size: 24rpx;
				}

			}
		}
	}

	.demo-tag {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
		padding: 0 10rpx;
	}

	.demo-tag-owner {
		background-color: #f9f6f3;
		color: #a98f68;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
		margin-bottom: 6rpx;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
